
<template>
	<Modal :value="visible" :loading="loading" :width="width" :closable="closable">
		<div slot="header">
			<div :class="`${prefixCls}-head`">
				<div :class="iconTypeCls">
					<i :class="iconNameCls"></i>
				</div>
				<div :class="`${prefixCls}-head-title`" v-html="title"></div>
			</div>
		</div>
		<div v-if="render" :class=" `${prefixCls}-body ${prefixCls}-body-render`"></div>
		<div v-else :class="`${prefixCls}-body`" v-html="content"></div>
		<div slot="footer">
			<div :class="`${prefixCls}-footer`">
				<Button @click="cancel" type="text" v-if="showCancel">{{localeCancelText}}</Button>
				<Button @click="ok" type="primary" :loading="buttonLoading">{{localeOkText}}</Button>
			</div>
		</div>
	</Modal>
</template>

<script lang="ts">
	import { Prop, Component } from "vue-property-decorator";
	import Anes from "../base";
	import Icon from "../icon";
	import Button from "../button";

	@Component({
		components: { Button, Icon }
	})
	export default class Confirm extends Anes {
		@Prop() onCancel!: Function;
		@Prop() onOk!: Function;
		@Prop() onRemove!: Function;
		@Prop({ type: String, default: "512" }) width!: string;
		@Prop({ type: String, default: "" }) title!: string;
		//@Prop({ type: String, default: "" }) content!: string;
		//@Prop({ type: String, default: "" }) iconType!: string;
		//@Prop({ type: String, default: "" }) iconName!: string;
		@Prop({ type: String, default: "" }) okText!: string;
		@Prop({ type: String, default: "" }) cancelText!: string;
		//@Prop({ type: Boolean, default: false }) visible!: boolean;
		@Prop({ type: Boolean, default: false }) showCancel!: boolean;
		@Prop({ type: Boolean, default: false }) loading!: boolean;
		@Prop({ type: Boolean, default: false }) buttonLoading!: boolean;
		@Prop({ type: Boolean, default: false }) scrollable!: boolean;
		@Prop({ type: Boolean, default: false }) closable!: boolean;
		@Prop({ type: Boolean, default: false }) render!: boolean;
		@Prop({ type: Boolean, default: false }) closing!: boolean; // 关闭有动画，期间使用此属性避免重复点击
		prefixCls = "ivu-modal-confirm";
		visible = false;
		iconType = "info";
		iconName = "ios-information-circle";
		content = "";
		get iconTypeCls() {
			return [
				`${this.prefixCls}-head-icon`,
				`${this.prefixCls}-head-icon-${this.iconType}`
			];
		}

		get iconNameCls() {
			return ["ivu-icon", `ivu-icon-${this.iconName}`];
		}

		get localeOkText() {
			if (this.okText && this.okText != "") {
				return this.l(this.okText);
			} else {
				return this.l("i.modal.okText");
			}
		}
		get localeCancelText() {
			if (this.cancelText && this.cancelText != "") {
				return this.l(this.cancelText);
			} else {
				return this.l("i.modal.cancelText");
			}
		}

		cancel() {
			if (this.closing) return;
			this.$children[0].$data.visible = false;
			this.buttonLoading = false;
			if (this.onCancel) this.onCancel();
			this.remove();
		}
		ok() {
			if (this.closing) return;
			if (this.loading) {
				this.buttonLoading = true;
			} else {
				this.$children[0].$data.visible = false;
				this.remove();
			}
			if (this.onOk) this.onOk();
		}
		remove() {
			this.closing = true;
			setTimeout(() => {
				this.closing = false;
				this.destroy();
			}, 300);
		}
		destroy() {
			this.$destroy();
			if (this.$el) document.body.removeChild(this.$el);
			if (this.onRemove) this.onRemove();
		}
	}
</script>

<style>
</style>
